<template>
  <div class="fenqy">
    <!-- <div class="contentTopTitle">
      <div class="fl">
        <div class="title">分套餐收入跟踪</div>
      </div>
    </div>-->
    <div class="operation">
      <el-form :inline="true" :model="form" label-width="80px" class="formList">
        <el-form-item label="选择区域">
          <dx-cascader :area_id.sync="form.areaId" />
        </el-form-item>
        <el-form-item label="账期" style="width: 350px;" class="imcome-picker">
          <!-- <el-date-picker
            v-model="form.time"
            type="monthrange"
            value-format="yyyyMM"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
          ></el-date-picker>-->
          <el-date-picker
            style="width: 110px;"
            v-model="form.startDate"
            value-format="yyyyMM"
            type="month"
            placeholder="选择月"
          ></el-date-picker>
          <span>~</span>
          <el-date-picker
            style="width: 110px;"
            v-model="form.endDate"
            value-format="yyyyMM"
            type="month"
            placeholder="选择月"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="锁定">
            <el-select v-model="form.lock" clearable>
              <el-option v-for="(it, i) in lockList" :key="i" :label="it.label" :value="it.value"></el-option>
            </el-select>
        </el-form-item>
         <el-form-item label="客户群">
            <el-select v-model="form.cust" clearable>
              <el-option v-for="(it, i) in custList" :key="i" :label="it.label" :value="it.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="存增量" style="width: 35%;">
          <el-select v-model="form.custType" style="width: 120px; margin-right: 15px;">
            <el-option label="全量" value="全量"></el-option>
            <el-option label="存量" value="存量"></el-option>
            <el-option label="增量" value="增量"></el-option>
            <!-- <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>-->
          </el-select>
          <el-button size="small" type="primary" @click="submitHandle()">查询</el-button>
           <el-button size="small" type="orange" @click="exportExcel(false)">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table
        ref="table"
        border
        stripe
        v-loading="tableLoading"
        :data="tableData"
        style="width: 100%"
        class="tableTh28"
        height="73vh"
        :span-method="arraySpanMethod"
        :header-cell-style="countHeadStyle"
      >
        <!-- <el-table-column label="产品类型">
            <template slot-scope="scope">  
             <p v-for="(item,index) in scope.row" :key="index" class="scopeItem">{{item}}</p>
            </template>

        </el-table-column>-->
        <el-table-column fixed label="产品类型" width="80" prop="proName"></el-table-column>
        <el-table-column fixed label="产品类型" width="80" prop="custType"></el-table-column>
        <el-table-column fixed label="区域" prop="areaName"></el-table-column>
        <el-table-column
          v-for="(item, index) in titleList"
          min-width="84"
          :key="index"
          :label="item"
          :prop="item"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
import { createSpanOne } from "@/utils/mixin.js";
import prefixAPI from "@/api/prefixAPI";
import { getCookie, setCookie } from "@/common/js/cookie";
let accountInfo = JSON.parse(getSessionStorage("accountInfo"));

export default {
  data() {
    return {
      tableLoading: false, //
      areaList: [],
      tableData: [],
      titleList: [],
      spanArr: "",
      // titleId: [],
      // titleName: [],
      form: {
        areaId: accountInfo.areaId,
        month: "",
        custType: "全量",
        startDate: "",
        endDate: "",
        time: "",
        lock: '',
        cust: '',
      },
      lockList: [
        {
          label: '锁定',
          value: '1',
        },
        {
          label: '非锁定',
          value: '0',
        }
      ],
      custList: [
        {
          label: '政企',
          value: '政企',
        },
        {
          label: '公众',
          value: '公众',
        }
      ],
      //   options: [
      //       {
      //       value: '全量',
      //       label: '全量'
      //     }, {
      //       value: '存量',
      //       label: '存量'
      //     }, {
      //       value: '增量',
      //       label: '增量'
      //     }
      //   ]
    };
  },
  created() {
    this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    // this.getCompanyByLvl();
    // this.getData();
    // this.form.month = this.moment().subtract(1,'months').format('YYYYMM')
    this.getMaxAcctMonthByMealPart();
  },
  methods: {
    areaChange() {},
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0 || columnIndex == 1) {
        return this.spanArr[rowIndex][columnIndex];
      }
    },
    //分产品导出
    exportExcel(type) {
      let areaId = "";
      let month = "";
      if (this.form.areaId) {
        areaId = this.form.areaId;
      } else {
        areaId = this.accountInfo.areaId;
      }
      month = this.form.month;
      let startTime = this.form.startDate,
          endTime = this.form.endDate,
          custType = this.form.custType,
          custLockFlg = this.form.lock,
          custFlg = this.form.cust;
      if (type) {
        if (process.env.NODE_ENV == "development") {
          window.location.href =
            prefixAPI.loc +
            "/api/mainUserArpu/exportMainUserArpuData?areaId=" +
            areaId +
            "&startDate=" +
            startTime +
            "&endDate=" +
            endTime +
            "&custType=" +
            custType +
            "&custLockFlg=" +
            custLockFlg +
            "&custFlg=" + 
            custFlg +
            "&token=" +
            getCookie("token");
        } else if (process.env.NODE_ENV == "production") {
          window.location.href =
            prefixAPI.hp +
            "/api/mainUserArpu/exportMainUserArpuData?areaId=" +
            areaId +
            "&startDate=" +
            startTime +
            "&endDate=" +
            endTime +
            "&custType=" +
            custType +
            "&custLockFlg=" +
            custLockFlg +
            "&custFlg=" + 
            custFlg +
            "&token=" +
            getCookie("token");
        }
      } else {
        if (process.env.NODE_ENV == "development") {
          //  /api/mainUserArpu/exportMainUserArpuData
          window.location.href =
            prefixAPI.loc +
            "/api/mainUserArpu/exportMainUserArpuData?areaId=" +
            areaId +
            "&startDate=" +
            startTime +
            "&endDate=" +
            endTime +
            "&custType=" +
            custType +
            "&custLockFlg=" +
            custLockFlg +
            "&custFlg=" + 
            custFlg +
            "&token=" +
            getCookie("token");
        } else if (process.env.NODE_ENV == "production") {
          window.location.href =
            prefixAPI.hp +
            "/api/mainUserArpu/exportMainUserArpuData?areaId=" +
            areaId +
            "&startDate=" +
            startTime +
            "&endDate=" +
            endTime +
            "&custType=" +
            custType +
            "&custLockFlg=" +
            custLockFlg +
            "&custFlg=" + 
            custFlg +
            "&token=" +
            getCookie("token");
        }
      }
    },
    submitHandle() {
      this.getData();
    },
    // arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    //   if (columnIndex == 0) {
    //     return this.spanArr[rowIndex];
    //   }
    // },
    getData() {
      let areaId = this.form.areaId
        ? this.form.areaId
        : this.accountInfo.areaId;
      let month = this.form.month
        ? this.form.month
        : this.formatDate(new Date());

      let startTime = this.form.startDate || "",
        endTime = this.form.endDate || "";
      let that = this,
        state;

      // if (startTime.length && endTime.length) {
      //   state = this.vaildMonth(startTime, endTime);
      //   if (!state) {
      //     this.$confirm("开始日期不能大于结束日期", "提示", {
      //       confirmButtonText: "确定",
      //       type: "warning"
      //     })
      //       .then(() => {
      //         //点击确定的操作(调用接口)
      //       })
      //       .catch(() => {
      //         //几点取消的提示
      //       });
      //     return false;
      //   }
      // }
      this.tableLoading = true;
      $budgetAPI.getMainUserArpuDataList(
        {
          areaId: areaId,
          custType: this.form.custType,
          startDate: startTime,
          endDate: endTime,
          custLockFlg: this.form.lock,
          custFlg: this.form.cust
        },
        res => {
          that.tableLoading = false;
          if (res.code == 0) {
            console.log(res);
            let content = res.content;
            that.titleList = content.titles;
            content.data.map(it => {
              it.dataList.map(item => {
                it[item.acctMonth] = item.indexValue;
              });
            });
            that.tableData = content.data;
            that.spanArr = that.mergeSpan2(content.data, [
              "proName",
              "custType"
            ]);
            that.form.time = [
              content.titles[0],
              content.titles[content.titles.length - 1]
            ];
            that.$nextTick(() => {
              that.$refs.table.doLayout();
            });
            // this.spanArr = createSpanOne(this.tableData, "indexType");
            // setTimeout(() => {
            //   this.$refs.table.doLayout();
            // }, 1200);
          } else {
            that.alertError(res);
          }
        },
        err => {
          that.tableLoading = false;
        }
      );
    },

    //根据层级获取区域树
    getCompanyByLvl() {
      $budgetAPI.getCompanyByLvl(
        {
          lvl: this.accountInfo.areaLvl,
          areaId: this.accountInfo.areaId
        },
        res => {
          let areaId = this.accountInfo.areaId;
          let areaName = this.accountInfo.areaName;
          if (res.code == 0) {
            for (let i = 0; i < res.content.length; i++) {
              if (res.content[i].areaId == areaId) {
                this.areaList = res.content;
                return;
              }
            }
            this.areaList = [{ areaId, areaName }, ...res.content];
          } else {
            this.alertError(res);
          }
        },
        err => {}
      );
    },
    mergeSpan2(tableData, arr) {
      let spanArr = new Array(tableData.length);
      for (let m = 0; m < spanArr.length; m++) {
        spanArr[m] = new Array(arr.length);
      }
      arr.forEach((ele, ind) => {
        let pos = null;
        tableData.forEach((item, index, self) => {
          if (index == 0) {
            spanArr[index][ind] = {
              rowspan: 1,
              colspan: 1
            };
            pos = 0;
          } else {
            if (item[ele] === self[index - 1][ele]) {
              spanArr[pos][ind].rowspan += 1;
              spanArr[index][ind] = {
                rowspan: 0,
                colspan: 0
              };
            } else {
              pos = index;
              spanArr[index][ind] = {
                rowspan: 1,
                colspan: 1
              };
            }
          }
        });
      });
      return spanArr;
    },
    countHeadStyle({ row, column, rowIndex, columnIndex }) {
      console.log(rowIndex, columnIndex);

      // if (rowIndex == 0) {
      //     return {display: 'none'}
      // }
    },
    formatDate: function(value) {
      if (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return y.toString() + MM.toString();
      } else {
        return "";
      }
    },
    vaildMonth(start, end) {
      let s = new Date(start).getTime(),
        e = new Date(end).getTime();
      if (s <= e) {
        return !0;
      }
      return !1;
    },
    getMaxAcctMonthByMealPart() {
      let areaId = this.form.areaId
        ? this.form.areaId
        : this.accountInfo.areaId;
      $budgetAPI.suspectedGetMaxAcctMonth(
        {
          areaId
        },
        res => {
          if (res && res.code == 0) {
            this.form.month = res.content;
            if(res.content) {
              this.form.startDate = res.content.substr(0, 4) + '01'
              this.form.endDate = res.content
            }
            this.getData();
          }
        },
        err => {}
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.operation {
  .imcome-picker {
    /deep/ .el-date-editor .el-range__icon {
      line-height: 25px;
    }
    /deep/ .el-date-editor .el-range-separator {
      padding: 0;
      width: 20px;
      line-height: 22px;
    }
    /deep/ .el-date-editor .el-range__close-icon {
      line-height: 25px;
    }
  }
}
</style>
